<template>
    <div class="el-collapse" role="tablist" aria-multiselectable="true">
        <slot></slot>
    </div>
</template>
<script>
    export default {
        name: 'ElCollapse',

        componentName: 'ElCollapse',

        props: {
            accordion: Boolean,
            value: {
                type: [Array, String, Number],
                default() {
                    return [];
                }
            }
        },

        data() {
            return {
                activeNames: [].concat(this.value)
            };
        },

        provide() {
            return {
                collapse: this
            };
        },

        watch: {
            value(value) {
                this.activeNames = [].concat(value);
            }
        },

        methods: {
            setActiveNames(activeNames) {
                activeNames = [].concat(activeNames);
                let value = this.accordion ? activeNames[0] : activeNames;
                this.activeNames = activeNames;
                this.$emit('input', value);
                this.$emit('change', value);
            },
            handleItemClick(item) {
                if (this.accordion) {
                    this.setActiveNames(
                        (this.activeNames[0] || this.activeNames[0] === 0) &&
                        this.activeNames[0] === item.name
                            ? '' : item.name
                    );
                } else {
                    let activeNames = this.activeNames.slice(0);
                    let index = activeNames.indexOf(item.name);

                    if (index > -1) {
                        activeNames.splice(index, 1);
                    } else {
                        activeNames.push(item.name);
                    }
                    this.setActiveNames(activeNames);
                }
            }
        },

        created() {
            this.$on('item-click', this.handleItemClick);
        }
    };
</script>
